<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>找回密码/修改密码</title>
  <!-- 引入Bootstrap  的css样式库  以及js封装的框架库-->
  <link href="css/bootstrap.css" rel="stylesheet">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/bootstrap.js"></script>
  <link rel="stylesheet" href="css/mottos.css">
  <link rel="stylesheet" href="css/show.css">
  <link rel="icon" href="images/12.ico">
  <style>
    body {
      background-color: #212020;
    }
    #content {
      position: relative;
      width: 30%;
      height: 500px;
      margin: 5% auto;
      background-color: #f0d094;
      border-radius: 10px;
      padding: 20px;
      overflow: hidden;
    }
    .tab_br{
      display: inline-block;
      height: 50px;
      background-color: #333;
      padding: 0 20px;
      color: #fff;
      font-size: 20px;
      line-height: 50px;
      border-radius: 10px;
    }
    .active{
       position: absolute;
       overflow: hidden;
       width: 80%;
       left: 10%;
    }
    .btn-primary{
      margin-left: 50px;
    }
    #find_Pwd_h1{
      background-color: orange;
      color: #000;
    }
    #find_Pwd_h1,#update_Pwd_h1{
      margin-left: 10px;
      border: 3px solid #333;
    }
    #find_Pwd_h1:hover,#update_Pwd_h1:hover{
      cursor: pointer;
      background-color: orange;
      color: #000;
      transform: scale(1.1);
    }
    #get_code{
      background-color: #f15656;
      color: #fff;
    }
    button{
      margin-left: 30%;
    }
    #findPwd{
      display: block;
    }
    #updatePwd{
      display: none;
    }
    label{
      margin-top: 10px;
    }
    @media (max-width: 1080px) {
      #content {
        width: 90%;
        height: 500px;
        margin: 11% auto;
      }
      button{
        margin-left: 20%;
      }
    }
  </style>
</head>
<body>
<%--    引入导航  ctrl + alt + -号,折叠代码  --%>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
        <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
        <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
        <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
        <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
        <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a target="_parent" id="login_out">
          <%   String uname = (String) session.getAttribute("uname");
            String welcomeMessage = "欢迎,登录";
            if (uname != null && !uname.isEmpty()) {
              welcomeMessage = "欢迎," + uname + "[退出登录]";
            }
            out.print(welcomeMessage);
          %>
        </a></li>
        <li><a target="_parent" href="regist.jsp">注册</a></li>
        <li><a target="_parent" href="#">会员中心</a></li>
        <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="content">
  <h1 class="tab_br" id="find_Pwd_h1">找回密码</h1>
  <h1 class="tab_br" id="update_Pwd_h1">更新密码</h1>
  <hr>
  <div id="findPwd" class="active">
        <div class="form-group">
          <form action="">
            <label for="account">输入账号:</label>
            <input type="text" class="form-control" id="faccount" name="account" required>
            <label for="fPhone">请输注册时填写的手机号:</label>
            <input type="text" class="form-control" id="fPhone" name="fPhone" required>
            <label for="get_code">发送验证码:</label>
            <input type="button" class="form-control" value="点击按钮-发送验证码" id="get_code" name="get_code">
            <label for="code">输入验证码:</label>
            <input type="text" class="form-control" id="code" name="code" required>
            <br>
            <button type="reset" class="btn btn-info">重置</button>
            <button type="button" id="f_submit" class="btn btn-primary">提交</button>
          </form>
        </div>
  </div>

  <div id="updatePwd" class="active">
    <form action="">
      <div class="form-group">
        <label for="account">输入账号:</label>
        <input type="text" class="form-control" id="account" name="account" required>
        <label for="oldpwd">旧密码:</label>
        <input type="password" class="form-control" id="oldpwd" name="oldpwd" required>
        <label for="newpwd">新密码:</label>
        <input type="password" class="form-control" id="newpwd" name="newpwd" required>
        <label for="newpwd2">确认新密码:</label>
        <input type="password" class="form-control" id="newpwd2" name="newpwd2" required>
        <br>
        <button type="reset" class="btn btn-info">重置</button>
        <button type="button" id="update_submit" class="btn btn-primary">提交</button>
      </div>
    </form>
  </div>

</div>
</body>

<script>
  /*找回更新密码切换。*/
  $("#find_Pwd_h1").click(function () {
      $(this).css({"background-color": "orange", "color": "#000"});
      $("#update_Pwd_h1").css({"background-color": "#333", "color": "#fff"});
      $("#findPwd").show();
      $("#updatePwd").hide();
      $("#content").css("background-color", "#f0d094");
  });
  $("#update_Pwd_h1").click(function () {
      $("#update_Pwd_h1").css({"background-color": "#2b7bb1", "color": "#000"});
      $("#find_Pwd_h1").css({"background-color": "#333", "color": "#fff"});
      $("#updatePwd").show();
      $("#findPwd").hide();
      $("#content").css("background-color", "#8bc4ea");
  });

  $("#fPhone").blur(function () {
      var fPhone = $("#fPhone").val();
      if (!/^1[34578]\d{9}$/.test(fPhone)) {
        alert("手机号码格式不正确！");
        return false;
      }
      let account = $("#faccount").val();
      $.ajax({
          url: "UpdateUserServlet?what=check",
          type: "post",
          data: {
              account: account,
              fPhone: fPhone
          },
          success: function (result) {
              if (result == "no_acc") {
                  alert("账号不存在！");
                  $("#faccount").val("");
              } else if (result == "phone") {
                  alert("手机号错误！");
                  $("#fPhone").val("");
              }
          },
          error: function () {
              alert("网络错误！");
          }
      });
  });


/*  阿里云的,好像没有阿里的签名接口，暂时不可以用，注释掉*/
   // var ali_AppKey ="204780426";
   // var ali_AppSecret="lyQiqGrdSr0wtfxghX0wJmnTY4vWKHTP";

  // 账户appkey
  var appkey = "2090904948202412201212128302259";
  //  账户appsecret
  var appsecret = "50b2b487adaf805a04941f5bcc23a32e";
  // 短信发送签名id
  var smsSignID = "955b27b713a149ce90fb61ab97a4001b";
  // 短信发送模版id
  var templateId = "02eb27b2eed54bae8c1263ad857bc4dd";
  // 短信发送接口地址
  var gy_url = "https://api.guoyangyun.com/api/sms/smsoto.htm";
  var code = "123456";

  /*发送验证码*/
  $("#get_code").click(function () {
      var account = $("#faccount").val();
      var fPhone = $("#fPhone").val();
      if (account == "" || fPhone == "") {
          alert("账号、手机号不能为空！");
          return false;
      }
     // 验证码，生成准确的随机的6位数字
      code = Math.floor(100000+Math.random() * 900000)+"";
      // alert("验证码为：" + code);
      $.ajax({
          url: gy_url,
          type: "POST",
          data: {
              appkey: appkey,
              appsecret: appsecret,
              mobile: fPhone,
              smsSignId: smsSignID,
              templateId: templateId,
              param:"**code**:"+code+",**minute**:1",  // 根据实际情况修改验证码等参数
          },
          success: function (result) {
            if (result) {
              alert("验证码已发送，请注意查收！");
              $("#get_code").val("重新发送验证码" + "(" + (60*5) + "s)");
              $("#get_code").attr("disabled", true);
              //设计循环计时器，300秒后重新发送验证码
              var count = 60*5;
              var timer = setInterval(function () {
                count--;
                $("#get_code").val("重新发送验证码" + "(" + count + "s)");
                if (count == 0) {
                  $("#get_code").attr("disabled", false);
                  clearInterval(timer);
                  $("#get_code").val("点击按钮-发送验证码");
                }
              }, 1000);
            }
          },
          error: function () {
              alert("网络错误！");
          }
    });
  });

  //设置是否验证的状态，初始状态为false
  var verification = false;

  /*发送验证码*/
  $("#f_submit").click(function () {
      var account = $("#faccount").val();
      var fPhone = $("#fPhone").val();
      var user_code = $("#code").val().trim();
      if (account == "" || fPhone == "" || user_code !=code) {
          alert("验证码有误！【请检查账号，手机号，验证码是否正确！】");
      }else{
        alert("验证成功，请设置新密码！");
        verification = true;
        $("#update_Pwd_h1").css({"background-color": "#2b7bb1", "color": "#000"});
        $("#find_Pwd_h1").css({"background-color": "#333", "color": "#fff"});
        $("#updatePwd").show();
        $("#findPwd").hide();
        $("#content").css("background-color", "#8bc4ea");
        // 设置#account 和#oldpwd 为不可编辑状态
        $("#account").val(account).attr("readonly", true);
        $("#oldpwd").val("").attr({"readonly": true,"placeholder":"---无需填写---"});
      }
  });

  /*更新密码*/
  $("#update_submit").click(function () {
      var account = $("#account").val();
      var oldpwd = $("#oldpwd").val();   //旧密码
      var newpwd = $("#newpwd").val();   //新密码
      var newpwd2 = $("#newpwd2").val(); //确认新密码
      if (newpwd.length < 6 || newpwd.length > 20) {
        alert("密码长度必须在6-20位之间！");
        return false;
      }
      if (!/^[a-zA-Z0-9]+$/.test(newpwd)) {
          alert("密码只能包含字母和数字！");
          return false;
      }
      if (newpwd.search(/[a-z]+/) < 0) {
          alert("密码必须包含至少一个小写字母！");
          return false;
      }
      if (newpwd != newpwd2) {
          alert("两次密码输入不一致！");
          return false;
      }
      if (newpwd == "" || newpwd2 == "") {
          alert("新密码不能为空！");
          return false;
      }
      if (verification == false && oldpwd == "") {
          alert("旧密码不能为空！");
          return false;
      }
      $.ajax({
          url: "UpdateUserServlet?what=update",
          type: "post",
          data: {
              account: account,
              oldpwd: oldpwd,
              newpwd: newpwd
          },
          success: function (result) {
              if (result == "success") {
                  alert("密码修改成功！");
                  window.location.href = "login.jsp";
              } else if (result == "error") {
                  alert("密码修改失败,请检查账号密码是否正确！");
              }
          },
          error: function () {
              alert("更新密码失败，请检查网络连接！");
          }
      });
  });

</script>
</html>
